let form = layui.form;

// 获取分类，渲染到下拉框的位置
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    let arr = [];
    res.data.forEach(item => {
      arr.push(`<option value="${item.id}">${item.name}</option>`)
    });
    $('select[name=cate_id]').append(arr.join(''));
    // 更新渲染
    form.render('select');
  }
});

// 把 textarea 多行文本框 换成 在线文本编辑器
initEditor();

// 实现基础的剪裁效果
let image = $('#image');
let option = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
};
image.cropper(option);

// 点击 选择封面 按钮，触发文件域的单击事件
$('button:contains("选择封面")').on('click', function () {
  $('#file').trigger('click');
});

// 当文件域的内容change之后，能够更换剪裁区的图片
$('#file').on('change', function () {
  // 获取文件列表
  let files = this.files;
  if (files.length > 0) {
    let url = URL.createObjectURL(files[0]);
    // 更换剪裁区的图片（销毁剪裁区 -> 更换图片 -> 重新创建剪裁区）
    image.cropper('destroy').attr('src', url).cropper(option);
  }
});


// 表单提交，阻止默认行为，收集数据，ajax提交
$('form').on('submit', function (e) {
  e.preventDefault();
  let fd = new FormData(this); // 传入表单的DOM对象
  // 修改 fd 对象里面的 content
  fd.set('content', tinyMCE.activeEditor.getContent());
  // 剪裁图片
  let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 });
  canvas.toBlob(blob => {
    // blob对象，二进制大对象；把它追加到 FormData 中，会自动转换成文件对象
    fd.append('cover_img', blob);

    // 检查 fd 里面有哪些数据
    // fd.forEach((value, key) => {
    //   console.log(key, value)
    // })
    $.ajax({
      type: 'POST',
      url: '/my/article/add',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message, { time: 1000 }, function () {
            location.href = './list.html';
          });
        } else {
          layer.msg(res.message);
        }
      }
    });
  });
})